<!--
 * @Descripttion :
 * @Author       : RAN
 * @Date         : 2021-07-14 11:42:03
 * @LastEditors  : RAN
 * @LastEditTime : 2021-07-14 17:43:25
-->
<template>
  <div class="home full-parent">
    <img class="full-parent" src="../assets/img/desktop.png" alt="" />
    <div class="dayContainer flex">
      <div class="day font92">{{ day }}</div>
      <div class="time flex-center font166">
        <div>{{ hour }}</div>
        <span class="animate-opacity">:</span>
        <div>{{ mm }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import request from "tsl-axios";

export default {
  name: "tacos-desktop",
  data() {
    return {
      low: "",
      high: "",
      day: dayjs().format("YYYY/MM/DD"),
      hour: dayjs().format("HH"),
      mm: dayjs().format("mm"),
      timer: null
    };
  },
  components: {},
  beforeDestroy() {
    this.timer && clearInterval(this.timer);
  },
  mounted() {
    this.timer = setInterval(() => {
      this.day = dayjs().format("YYYY/MM/DD");
      this.hour = dayjs().format("HH");
      this.mm = dayjs().format("mm");
    }, 1000);
  },
  created() {
    request
      .get("http://wthrcdn.etouch.cn/weather_mini", {
        city: "重庆市"
      })
      .then((res) => {
        if (res.status === 1000 && res.data.forecast && res.data.forecast.length > 0) {
          let row = res.data.forecast[0];
          this.low = row.low.replace(/[^\d]*/g, "");
          this.high = row.high.replace(/[^\d]*/g, "");
          console.log(this.low, this.high, res.data.wendu);
        }
      });
  }
};
</script>

<style scoped>
.home {
  position: relative;
  padding: 0;
  background: #171a32;
  background: linear-gradient(90deg, #171a32 0%, #087099 50%, #171a32 100%);
}

.dayContainer {
  position: absolute;
  top: 1.2vw;
  right: 3.6vw;
  width: 11vw;
  height: 2.5vw;
  color: #cdd0d6;
  font-size: 3.25vh;
}

.flex-center {
  display: flex;
  align-items: center;
}

.day,
.time {
  height: 80px;
  line-height: 80px;
}

.time {
  font-size: 3.9vh;
}

@keyframes myOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.font92 {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-right: 40px;
  font-weight: 400;
  font-size: 3.25vh;
  letter-spacing: 1px;
}

.font166 {
  position: absolute;
  right: 0;
  bottom: 15px;
  font-size: 5vh;
}
</style>
